<template>
	<!-- 同城服务 -->
	<view>
		<view class="header">
			<text>{{vuex_city}}</text>
			<input type="text" disabled @click="C_gotoSearch" placeholder="搜索您需要的服务" />
		</view>
		
		<!-- 轮播图 -->
		<u-swiper :list="banner" :border-radius='10' circular class="u-m-t-20 u-m-b-20 " effect3d height="320"></u-swiper>
		
		<!-- 菜单 -->
		<swiper class="menu">
			<swiper-item v-for="(item,index) in menu" :key="index" >
				<view v-for="(ite,idx) in item" :key='idx' @click="C_menuItem(ite.id)">
					<image :src="ite.image" mode="aspectFill"></image>
					<view>{{ite.catename}}</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 列表 -->
		<view class="list">
			<view class="tit">热门店铺</view>
			<view class="cont" >
				<view v-for="(item,index) in list" :key="index" @click="listItem(item.id)">
					<image :src="item.images[0]" mode="aspectFill"></image>
					<view>{{item.name}}</view>
					<text>{{item.business}}</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
<script>
	import QQMapWX from '@/common/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	var qqmapsdk;
	export default{
		data(){
			return{
				banner:[],
				menu:[],
				list:[]
			}
		},
		onShow() {
			
			this.def_database()
			
		},
		methods:{
			C_gotoSearch(){
				uni.navigateTo({
					url:'/pages/healthy/menu/two/a3/menu/an_mo/search_an_mo/search_an_mo'
				})
			},
			listItem(id){
				uni.navigateTo({
					// url:'./menu/an_mo/an_mo?id='+id
					url:'/pages/healthy/menu/two/a3/menu/an_mo/shop/shop?id='+id
				})
			},
			async def_database(){
				this.$u.post('/index/localnavcate').then(res=>{
					let menu = [];
					for (let i = 0;i<res.data.length;i+=4) {
						menu.push(res.data.slice(i,i+4))
					}  
					this.menu = menu
				})
				let banner = await this.$u.api.indexlocalnav() 
				this.banner = banner.data
				
				uni.getLocation({
					success:res=>{
						console.log(res,'========================');
						let {latitude,longitude} = res
						new QQMapWX({
							key: 'HHWBZ-2I2CQ-R6G5J-GH4BQ-W25ET-2RBQ7'
						}).reverseGeocoder	({
							location:{latitude,longitude},
							success:res=>{
								this.$u.vuex('vuex_city',res.result.address_component.city)
								this.$u.post('/local/local_hot_shop',{
									city:res.result.address_component.city
								}).then(res=>{
									this.list = res.data
								})
							}
						})
					},
					fail(e) {
						console.log(e,'失败');
					}
				})
			},
			C_menuItem(id){
				// uni.navigateTo({url,complete:com=>{console.log(com);}})
				uni.navigateTo({
					url:'./menu/an_mo/an_mo?id='+id
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #FBFBFB;
	
	.header{
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		width: 95%;
		margin: 30rpx auto;
		text{
			padding: 0 20rpx;
		}
		input{
			padding-left: 50rpx;
			flex: 1;
			height: 60rpx;
			background-color: #F1F2F4;
			border-radius: 50rpx;
		}
	}
	
	.menu{
		width: 95%;
		margin: 30rpx auto;
		background-color: #FFFFFF;
		padding: 30rpx 0rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		border-radius: 20rpx;
		color: gray;
		height: 180rpx;
		box-shadow: 0px 0px 5px rgba(0,0,0,.1);
		swiper-item{
			display: grid;
			grid-template-columns:repeat(4,1fr);
			>view{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.list{
		width: 95%;
		margin: auto;
		
		.tit{
			font-weight: bold;
			background-color: #FFFFFF;
			position: sticky;
			top: 0;
			padding-bottom: 20rpx;
		}
		.cont{
			display: grid;
			grid-template-columns:repeat(3,1fr);
			grid-gap:30rpx;
			padding-bottom: 20rpx;
			>view{
				// border: 1px solid red;
				overflow: hidden;
				image{
					overflow: scroll;
					height: 150rpx;
					border-radius: 10rpx;
					max-width: 100%;
				}
				view{font-weight: bold;}
				text{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 100%;
					display: block;
					font-size: 24rpx;
					color: gray;
					margin-top: 10rpx;
				}
			}
		}
	}
	
	}

</style>